import { _decorator, Component, Label, Button } from 'cc';
const { ccclass, inspector, property } = _decorator;

import { VMLabel, VMNode, mvvm, VMButtonClick } from "../../framework/vm/VMDecorator";

import * as cc from "cc";
import { userData } from '../../game/storage/UserData';
import { VMCenter } from '../../framework/vm/VMCenter';
import { VMEntity } from '../../framework/vm/VMEntity';
import { DemoVMSceneBase } from './DemoVMSceneBase';

@ccclass('DemoVMButton')
// @mvvm()
export default class DemoVMButton extends DemoVMSceneBase implements IMVVM{
    _vmTag: string;
    _vmEntitys: VMEntity[];

    
    // @VMLabel({ watchPath: '*.level' })
    @property(Label)
    levelLabel: Label | null = null;

    // @VMButton({
    //     watchPath: '*.level', min: 0, max: 999, operation: (param) => {
    //         return param.currentValue - 1;
    //     }
    // })
    @property(Button)
    btnMulLevel: cc.Button = null;


    // @VMButton({
    //     watchPath: '*.level', min: 0, max: 999, operation: (param) => {
    //         return param.currentValue + 1;
    //     }
    // })
    @property(cc.Button)
    btnAddLevel: cc.Button = null;

    @property(cc.Label)
    multiLabel: cc.Label = null;
    
    @property(cc.Button)
    btnMultiAdd: cc.Button = null;
    
    @property(cc.Button)
    btnMultiMul: cc.Button = null;

    data = {
        nickName: '玩家',
        age: 0,
        level: 0,
        gold: 0,
        gem: 0,
        mhp: 999,
        atk: 0
    }

    onLoad() {
    }
  
    start() {
        super.start();
    }


    onEnable(){
        VMCenter.add(this.data,this);

        
        VMCenter.Label(this,this.levelLabel,{watchPath: "*.level"})


        VMCenter.Label(this,this.multiLabel,{watchPath: ["*.gold","*.gem"]});


        VMCenter.ButtonClick(this,this.btnMultiAdd,{
            watchPath: ["*.gold","*.gem"],
            min: [0,0],
            max: [100,80],
            operation(opts){
                let arr = opts.currentValue;
                for (let i = 0; i < arr.length; i++) {
                    arr[i] += 10;
                }
                return arr;
            }
        });
        VMCenter.ButtonClick(this,this.btnMultiMul,{
            watchPath: ["*.gold","*.gem"],
            min: [0,0],
            max: [100,80],
            operation(opts){
                let arr = opts.currentValue;
                for (let i = 0; i < arr.length; i++) {
                    arr[i] -= 10;
                }
                return arr;
            }
        });
            

        // let MultiAttr = function(isAdd: boolean){
        //     return {
        //         watchPath: ["*.gold","*.gem"],
        //         min: [0,0],
        //         max: [100,80],
        //         operation(opts){
        //             let arr = opts.currentValue;
        //             for (let i = 0; i < arr.length; i++) {
        //                 isAdd ? arr[i] += 10 : arr[i] -= 10;
        //             }
        //             return arr;
        //         }
        //     };
        // }

        
        // VMCenter.ButtonClick(this,this.btnMultiAdd,MultiAttr(true));
        // VMCenter.ButtonClick(this,this.btnMultiMul,MultiAttr(false));


        VMCenter.ButtonClick(this,this.btnAddLevel,{
            watchPath: '*.level', min: 0, max: 20, operation: (opts) => {
                return opts.currentValue + 1;
            }
        });

        VMCenter.ButtonClick(this,this.btnMulLevel,{
            watchPath: '*.level', min: 0, max: 20, operation: (opts) => {
                
                return opts.currentValue - 1;
            }
        });
    }
    onDisable(){
        VMCenter.remove(this);
    }
    onEditBoxEnded(event) {
        console.log('DemoVMButton-> ', event.string);

        let num = parseInt(event.string);
        if (isNaN(num)) {
            return;
        }
        this.data.level = num;

    }
    // // update (dt) {}
}

